<template>
  <div>
    <!-- v-if="htmlCode" -->
    <div  class="sameDiv">
      <div class="total">全部商品 {{ tableData.length }}</div>
      <el-table
        class="table"
        :stripe="true"
        :data="tableData"
        border
        height="70vh"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="57">
        </el-table-column>
        <el-table-column fixed prop="date" label="商品名称">
          <template slot-scope="scope">
            <div class="nameBox">
              <img src="" alt="" />
              <el-image
                style="width: 90px; height: 90px"
                :src="scope.row.imgUrl"
                :prediv-src-list="[scope.row.imgUrl]"
              >
              </el-image>
              <div class="name">{{ scope.row.productName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="modelSpec"
          label="规格型号"
        width="200"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.specType && scope.row.specType.skuValue1" type="success">{{scope.row.specType && scope.row.specType.skuValue1}}</el-tag>
            <el-tag v-if="scope.row.specType &&  scope.row.specType.skuValue2" style="margin: 0 10px;" type="success">{{scope.row.specType &&  scope.row.specType.skuValue2}}</el-tag>
            <el-tag v-if="scope.row.specType && scope.row.specType.skuValue3" type="success">{{scope.row.specType && scope.row.specType.skuValue3}}</el-tag>
           
            <!-- {{scope.row.specType}} -->
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="province"
          label="备注"
          width="200"
        >
          <template slot-scope="scope">
            <el-input
              resize="none"
              type="textarea"
              :rows="2"
              placeholder="请输入备注"
              v-model="scope.row.yaoqiu"
            >
            </el-input>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="totalPrice"
          width="150"
          label="合同单价"
        >
          <!-- <template slot-scope="scope">￥1899.00</template> -->
        </el-table-column>
        <el-table-column align="center" prop="number" label="数量" width="160">
          <template slot-scope="scope">
            <el-input-number
              :min="1"
              @change="changeNum(scope.row)"
              size="small"
              v-model="scope.row.number"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="150"
          prop="address"
          label="数量小计"
        >
          <template slot-scope="scope">
            <span style="font-weight: bold"
              >￥{{ scope.row.totalPrice * 1 * scope.row.number }}</span
            >
          </template>
        </el-table-column>

        <el-table-column align="center" fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="handle">
        <div class="left">
          <el-button
            @click="clearDate"
            type="text"
            size="small"
            icon="el-icon-delete"
            >删除选中的商品</el-button
          >
          <!-- <el-button type="text" size="small" icon="el-icon-download"
        >导出明细</el-button
      > -->
        </div>
        <div class="right">
          <div>
            已选择
            <span>{{ multipleSelection.length }}</span>
            件商品
          </div>
          <div class="totalMoney">
            总金额: <span>￥{{ totalPrice }}</span>
          </div>
          <div @click="handle" class="btn">去结算</div>
        </div>
      </div>

      <el-dialog
        v-if="dialogVisible"
        title="选择支付方式"
        :visible.sync="dialogVisible"
        width="30%"
        @close="handleClose"
      >

      <div >
        <ul class="pay">
          <li
            :key="index"
            v-for="(item, index) in payList"
            @click="tabPay(index)"
            :class="[cur == index ? 'active' : '']"
          >
            <!-- <img v-if="index==0" src="../../assets/pay/1.png" alt="">
  <img v-else-if="index==1" src="../../assets/pay/2.png" alt="">
  <img v-else src="../../assets/pay/3.png" alt=""> -->
            <div class="imgs"></div>
            <div>{{ item.name }}</div>
          </li>
        </ul>

        <p style="padding: 10px 0; color: red;" v-if="tips">{{ tips }}</p>
      </div>
        
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            style="
              background: rgb(0, 173, 180);
              border: 1px solid rgb(0, 173, 180);
            "
            type="primary"
            @click="sub()"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- <el-dialog
    title="支付"
    :visible.sync="payMask"
    width="80%"
    height="500px"
    @close="payMask = false"
  >
    <div v-html="htmlCode">
    
    </div>
   
  </el-dialog> -->
    </div>
    <div >
      <div v-html="htmlCode"></div>
    </div>
  </div>
</template>
  
  <script>
import {
  gwcartlist,
  gwcartaddnumber,
  delgwcart,
  selgwcart,
  settleaccounts,
  createquotation,
  gopay,
  calculatefare
} from "../../apis/index";

export default {
  methods: {
    sub() {
      let index = this.payList[this.cur]?.id;

      if (index == 1) {
        //生成合同
        this.subContract();
      } else if (index == 2) {
        //生成报价单
        this.subBJD();
      } else {
        //发起支付
        this.paying();
      }
      // this.dialogVisible = false
    },
    paying() {
      // const loading = this.$loading({
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      let query = this.multipleSelection?.map((r) => {
        return {
          gwCartId: r.id,
          remark: r.yaoqiu,
        };
      });

      console.log(query, "&&&&&&&&");

      // this.$router.push("/pay");

      gopay(query)
        .then((res) => {
          console.log(res.data, 4444);
          if (res.data.code == 200) {
            // this.payMask = true;
            this.htmlCode = res.data.data.body;

            this.$nextTick(() => {
              document.forms[0].submit(); //渲染支付宝支付页面
            });
          } else if (res.data.code == 99) {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });

            setTimeout(() => {
              this.$router.push({
                path: "/user",
              });
            }, 500);
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch(() => {});
    },
    subBJD() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      //

      let query = this.multipleSelection?.map((r) => {
        return {
          gwCartId: r.id,
          remark: r.yaoqiu,
        };
      });

      createquotation(query)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: "报价单生成成功，请前往我的订单查看",
              type: "success",
            });
            loading.close();
            this.getDate();
            this.dialogVisible = false
          } else if (res.data.code == 99) {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });

            setTimeout(() => {
              this.$router.push({
                path: "/user",
              });
            }, 500);
          }
        })
        .catch(() => {});
    },
    subContract() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      let query = this.multipleSelection?.map((r) => {
        return {
          gwCartId: r.id,
          remark: r.yaoqiu,
        };
      });

      settleaccounts(query)
        .then((res) => {

          loading.close();
          if (res.data.code == 200) {
            this.$message({
              message: "合同生成成功，请前往我的订单查看",
              type: "success",
            });
           
            this.getDate();
            this.dialogVisible = false
          } else if (res.data.code == 99) {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });

            setTimeout(() => {
              this.$router.push({
                path: "/user",
              });
            }, 500);
          }
        })
        .catch(() => {});
    },

    handleClose() {
      this.dialogVisible = false;
    },
    tabPay(i) {
      this.cur = i;
      if(this.cur==2){
        calculatefare()
        .then((res) => {
          this.tips = res.data.data
          console.log(res,5555555);
         })
        .catch(() => {});
      }
    },
    // 结算
    handle() {
      if (this.multipleSelection.length) {
        // 弹出选择框
        this.dialogVisible = true;

        if(this.cur==2){
        

        calculatefare()
        .then((res) => {
          this.tips = res.data.data
          console.log(res,5555555);
         })
        .catch(() => {});
      }
      } else {
        this.$message({
          message: "请勾选需结算的商品",
          type: "warning",
        });
      }
    },
    getDate() {
      gwcartlist()
        .then((res) => {
          this.tableData = res.data.data ?? [];

          this.$nextTick(() => {
            if (this.tableData?.length) {
              for (let i = 0; i < this.tableData?.length; i++) {
                if (this.tableData[i]?.isSelect == 1) {
                  this.$refs.multipleTable.toggleRowSelection(
                    this.tableData[i]
                  );
                }
              }
            }
          });
        })
        .catch(() => {});
    },

    Fnselgwcart(val) {
      selgwcart({
        gwCartId: val?.map((r) => r.id)?.join(","),
        isSelect: 1,
      })
        .then((res) => {})
        .catch(() => {});
    },
    changeNum(val) {
      console.log(val, 77777777777);

      gwcartaddnumber({
        gwCartId: val.id,
        number: val.number,
      })
        .then((res) => {
          this.getDate();
        })
        .catch(() => {});
    },

    clearDate() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: "warning",
          message: "请先勾选需结算的商品",
        });

        return;
      }
      this.$confirm("确定删除商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.Fndelgwcart(this.multipleSelection.map((r) => r.id)?.join(","));

          // let cur = this.multipleSelection?.filter((r) => r.id != row.id);
          console.log(this.multipleSelection, 6666666);

          selgwcart({
            gwCartId: "",
            isSelect: 1,
          })
            .then((res) => {})
            .catch(() => {});
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    Fndelgwcart(gwCartId) {
      delgwcart({
        gwCartId,
      })
        .then((res) => {
          this.getDate();
        })
        .catch(() => {});
    },

    handleClick(row) {
      console.log(row);
      this.$confirm("确定删除商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.Fndelgwcart(row.id);
          let cur = this.multipleSelection?.filter((r) => r.id != row.id);
          console.log(cur, 6666666);

          selgwcart({
            gwCartId: cur?.map((r) => r.id)?.join(","),
            isSelect: 1,
          })
            .then((res) => {})
            .catch(() => {});

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.Fnselgwcart(val);
    },
  },

  computed: {
    totalPrice() {
      return this.multipleSelection.reduce((cur, pre) => {
        return cur + pre.totalPrice * pre.number;
      }, 0);
    },
  },

  data() {
    return {
      tips:"",
      payMask: false,
      htmlCode:null,
      cur: 0,
      payList: [
        {
          name: "生成合同",
          id: 1,
        },
        {
          name: "生成报价单",
          id: 2,
        },
        {
          name: "发起支付",
          id: 3,
        },
      ],
      dialogVisible: false,
      multipleSelection: [],
      tableData: [],
    };
  },
  mounted() {
    this.getDate();
  },
};
</script>

  <style lang="scss" scoped>
.pay {
  display: flex;
  align-items: center;
  justify-content: center;
  li {
    cursor: pointer;
    border: 1px solid #efefef;
    margin-right: 30px;
    padding: 20px 0;
    border-radius: 5px;
    list-style-type: none;
    width: 200px;
    text-align: center;
    // img{
    //   width: 80px;
    //   height: 80px;
    //   display: block;
    //   margin: 0 auto 20px;
    // }
    .imgs {
      width: 50px;
      height: 50px;
      margin: 0 auto 5px;
    }
    &:nth-child(1) > .imgs {
      background: url("../../assets/pay/1.png") no-repeat;
      background-size: cover;
    }
    &:nth-child(2) > .imgs {
      background: url("../../assets/pay/2.png") no-repeat;
      background-size: cover;
    }
    &:nth-child(3) > .imgs {
      background: url("../../assets/pay/3.png") no-repeat;
      background-size: cover;
    }
    &:hover {
      border: 1px solid rgb(0, 173, 180);
      color: rgb(0, 173, 180);
    }
    &:hover:nth-child(1) > .imgs {
      background: url("../../assets/pay/4.png") no-repeat;
      background-size: cover;
    }
    &:hover:nth-child(2) > .imgs {
      background: url("../../assets/pay/5.png") no-repeat;
      background-size: cover;
    }
    &:hover:nth-child(3) > .imgs {
      background: url("../../assets/pay/6.png") no-repeat;
      background-size: cover;
    }
    &.active {
      border: 1px solid rgb(0, 173, 180);
      color: rgb(0, 173, 180);
    }

    &.active:nth-child(1) > .imgs {
      background: url("../../assets/pay/4.png") no-repeat;
      background-size: cover;
    }
    &.active:nth-child(2) > .imgs {
      background: url("../../assets/pay/5.png") no-repeat;
      background-size: cover;
    }
    &.active:nth-child(3) > .imgs {
      background: url("../../assets/pay/6.png") no-repeat;
      background-size: cover;
    }
  }
}
.table {
  color: #323232;
}
.handle {
  margin-bottom: 30px;
  background-color: #ededed !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    padding: 8px 10px;
  }
  .right {
    display: flex;
    align-items: center;
    .totalMoney {
      padding: 0 35px;
    }
    span {
      color: #e22219;
      font-weight: bold;
      font-size: 17px;
      padding: 0 2px;
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 50px;
      background: #e22219;
      color: #fff;
      cursor: pointer;
    }
  }
}
.nameBox {
  display: flex;
  align-items: center;
  .name {
    margin-left: 15px;
  }
}
::v-deep .el-button--text {
  color: #323232;
  font-size: 14px;
}

::v-deep
  .el-table__header
  .el-table-column--selection
  .cell
  .el-checkbox:after {
  color: #606266;
  content: "全选";
  font-size: 14px;
  margin-left: 2px;
  font-weight: bold;
}

::v-deep .el-table th {
  // text-align: center;
  background-color: #ededed !important;
  // border-right: 1px solid #fff;
  color: #323232;
}
::v-deep .el-table tr {
  border-bottom: 3px solid #323232;
}

.total {
  color: #e22219;
  font-size: 18px;
  padding: 10px 0;
}
</style>